<script setup lang='ts'>
import { reactive } from 'vue'

const visible = defineModel<boolean>()

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  customer: '',
})
const isChange1 = ref('业务续约')
const isChange = ref('+')
</script>

<template>
  <el-dialog
    v-model="visible"
    title="发起续约流程"
    width="600px"
    :before-close="() => visible = false"
  >
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="续约类型*">
        <el-radio-group v-model="isChange1">
          <el-radio label="业务续约" />
          <el-radio label="业务变更" />
        </el-radio-group>
      </el-form-item>

      <template v-if="isChange1 === '业务变更'">
        <el-form-item label="月租变化*">
          <el-input placeholder="">
            <template #prepend>
              <el-select v-model="isChange" placeholder="请选择价格变更" style="width: 120px">
                <el-option label="-" value="-" />
                <el-option label="+" value="+" />
              </el-select>
            </template>
            <template #append>
              元
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="目标月租">
          <el-input disabled>
            <template #append>
              <div>元</div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="一次性费用">
          <el-input>
            <template #append>
              <div>元</div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="项目经理(PM)*">
          <el-select placeholder="">
            <el-option label="张三" value="张三" />
            <el-option label="李四" value="李四" />
          </el-select>
        </el-form-item>
        <el-form-item label="售前*">
          <el-select placeholder="">
            <el-option label="王五" value="王五" />
            <el-option label="赵六" value="赵六" />
          </el-select>
        </el-form-item>
        <el-form-item label="业务变更描述*">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <div mb3>
          <div type="warning" class="rounded-md bg-amber:10 p2">
            将自动为您发起业务变更流程
          </div>
        </div>
      </template>
      <template v-else>
        <el-form-item label="月租变化*">
          <el-input placeholder="">
            <template #prepend>
              <el-select v-model="isChange" placeholder="请选择价格变更" style="width: 120px">
                <el-option label="-" value="-" />
                <el-option label="+" value="+" />
              </el-select>
            </template>
            <template #append>
              元
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="目标月租">
          <el-input disabled>
            <template #append>
              <div>元</div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="一次性费用">
          <el-input>
            <template #append>
              <div>元</div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
      </template>
    </el-form>

    <template #footer>
      <span>
        <el-button @click=" visible = false">关闭</el-button>
        <el-button type="primary" @click="visible = false">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
